<template>
	<view class="pupop">
		<view class="popup-box" :animation="animationData">
			<view class="pupop-btn">
				<view @tap="cancel">取消</view>
				<view @tap="confirm" style="color: #c39a71">确定</view>
			</view>
			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in provinceList" :key="index">{{ item.name }}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item, index) in cityList" :key="index">{{ item.name }}</view>
				</picker-view-column>
				<picker-view-column v-if="column == 3">
					<view class="item" v-for="(item, index) in areaList" :key="index">{{ item.name }}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
import { addressList } from './cityData.js';
export default {
	data() {
		return {
			value: [],
			addressList,
			provinceList: [],
			cityList: [],
			areaList: [],
			indicatorStyle: `height: 50px;`,
			provinceIndex: 0,
			cityIndex: 0,
			areaIndex: 0,
			animationData: {}
		};
	},
	props: {
		column: {
			type: Number,
			default: 3
		},
		defaultValue: {
			default: () => ''
		},
		visible: {
			type: Boolean,
			default: () => false
		},
		maskCloseAble: {
			type: Boolean,
			default: () => true
		}
	},
	watch: {
		visible(val) {
			this.changeActive();
		},
		defaultValue() {
			this.init();
		}
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			var provinceList = [];
			addressList.filter((item) => {
				provinceList.push({
					code: item.code,
					name: item.name
				});
			});
			this.provinceList = [...provinceList];
			if (!this.defaultValue) {
				this.cityList = addressList[0].children;
				this.areaList = addressList[0].children[0].children;
			} else {
				var city = {
					11: '北京',
					12: '天津',
					13: '河北',
					14: '山西',
					15: '内蒙古',
					21: '辽宁',
					22: '吉林',
					23: '黑龙江 ',
					31: '上海',
					32: '江苏',
					33: '浙江',
					34: '安徽',
					35: '福建',
					36: '江西',
					37: '山东',
					41: '河南',
					42: '湖北 ',
					43: '湖南',
					44: '广东',
					45: '广西',
					46: '海南',
					50: '重庆',
					51: '四川',
					52: '贵州',
					53: '云南',
					54: '西藏 ',
					61: '陕西',
					62: '甘肃',
					63: '青海',
					64: '宁夏',
					65: '新疆',
					71: '台湾',
					81: '香港',
					82: '澳门',
					91: '国外 '
				};
				if (Array.isArray(this.defaultValue) && this.defaultValue.length >= 2) {
					console.log(this.defaultValue);
					var province = this.defaultValue[0];
					var city = this.defaultValue[1];
					this.provinceIndex = 0;
					this.cityIndex = 0;
					this.areaIndex = 0;
					this.provinceIndex = addressList.findIndex((obj) => {
						return obj.name == province;
					});
					this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0;
					this.cityList = addressList[this.provinceIndex].children;
					this.cityIndex = this.cityList.findIndex((obj) => {
						return obj.name == city;
					});
					this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0;
					this.areaList = this.cityList[this.cityIndex].children;
					if (this.defaultValue.length > 2) {
						this.areaIndex = this.areaList.findIndex((obj) => {
							return obj.name == this.defaultValue[2];
						});
					}
					this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0;
					this.$nextTick(() => {
						if (this.column == 3) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]));
						} else if (this.column == 2) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]));
						}
					});
				} else if (/^\d{6}$/.test(this.defaultValue)) {
					var province = this.defaultValue.substr(0, 2);
					var city = this.defaultValue.substr(0, 4);
					this.provinceIndex = 0;
					this.cityIndex = 0;
					this.areaIndex = 0;
					this.provinceIndex = addressList.findIndex((obj) => {
						return obj.code == province;
					});
					this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0;
					this.cityList = addressList[this.provinceIndex].children;
					this.cityIndex = this.cityList.findIndex((obj) => {
						return obj.code == city;
					});
					this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0;
					this.areaList = this.cityList[this.cityIndex].children;
					this.areaIndex = this.areaList.findIndex((obj) => {
						return obj.code == this.defaultValue;
					});
					this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0;
					this.$nextTick(() => {
						if (this.column == 3) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]));
						} else if (this.column == 2) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]));
						}
					});
				} else {
					uni.showToast({
						title: '地区编码格式不正确',
						icon: 'none'
					});
					console.log('地区编码格式不正确');
				}
			}
			this.changeActive();
		},
		confirm() {
			if (this.column == 3) {
				this.$emit('confirm', {
					code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
					name:
						addressList[this.provinceIndex].name +
						addressList[this.provinceIndex].children[this.cityIndex].name +
						addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
					provinceName: addressList[this.provinceIndex].name,
					cityName: addressList[this.provinceIndex].children[this.cityIndex].name,
					areaName: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
				});
			} else if (this.column == 2) {
				this.$emit('confirm', {
					code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code.substring(0, 4) + '00',
					name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name,
					provinceName: addressList[this.provinceIndex].name,
					cityName: addressList[this.provinceIndex].children[this.cityIndex].name
				});
			} else {
				uni.showToast({
					title: '目前column只能传2和3',
					icon: 'none'
				});
			}
		},
		cancel() {
			this.$emit('cancel');
		},
		// 动画
		changeActive() {
			var active = '-415px';
			if (this.visible) {
				active = 0;
			}
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'linear'
			});
			animation.bottom(active).step();
			this.animationData = animation.export();
		},
		bindChange(e) {
			e.detail.value[0] = e.detail.value[0] || 0;
			e.detail.value[1] = e.detail.value[1] || 0;
			e.detail.value[2] = e.detail.value[2] || 0;
			if (e.detail.value[0] != this.provinceIndex) {
				// console.log('监听第一列')
				this.provinceChange(e.detail.value[0]);
			} else if (e.detail.value[1] != this.cityIndex) {
				// console.log('监听第二列')
				this.cityChange(e.detail.value[1]);
			} else if (e.detail.value[2] != this.areaIndex) {
				// console.log('监听第三列')
				this.areaChange(e.detail.value[2]);
			}
		},
		// 监听第一列变化
		provinceChange(e) {
			this.provinceIndex = e;
			this.cityIndex = 0;
			this.areaIndex = 0;
			this.value = [...[e, 0, 0]];
			this.cityList = addressList[e].children;
			this.areaList = addressList[e].children[0].children;
		},
		// 监听第二列变化
		cityChange(e) {
			this.cityIndex = e;
			this.areaIndex = 0;
			// console.log(this.cityIndex, this.areaIndex)
			this.value = [...[this.provinceIndex, e, 0]];
			this.cityList = addressList[this.provinceIndex].children;
			this.areaList = addressList[this.provinceIndex].children[e].children;
		},
		// 监听第三列变化
		areaChange(e) {
			this.areaIndex = e;
		},
		// 点击模态框
		close() {
			if (this.maskCloseAble) {
				this.cancel();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.pupop {
	.popup-box {
		position: fixed;
		left: 0;
		bottom: -315px;
		z-index: 99999;
		background: #fff;
		padding-bottom: 50px;
		.pupop-btn {
			height: 40px;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			justify-content: space-between;
		}
	}
	.pupop-model {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.5);
	}
	.pupop-models {
		display: none;
	}
	.picker-view {
		width: 750rpx;
		height: 225px;
		margin-top: 20rpx;
	}
	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 50px;
	}
}
</style>
